<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/asserts/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/asserts/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/asserts/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/asserts/css/common.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/top.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/foot.css}" rel="stylesheet" />

		<!-- 订单页和购物车类似，所以需要购物车的样式 -->
		<link th:href="@{/asserts/css/cart.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/order.css}" rel="stylesheet" />

	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{commons/tag::topNav}"></div>
		<!--  =================== head =============================== -->
		<div th:replace="~{commons/tag::headerNav}"></div>

		<!-- ==================== 订单页 ==================== -->
		<div class="container no-padding book-detail-bg">
		</div>

		<div class="index mt50">
			<div class="container no-padding">
				<span class="cart-name">订单结算页：</span>
			</div>
		</div>
		
		<div class="container no-padding">
			<div class="address">
				<p>收货人信息：</p>
				<p th:if="${#lists.isEmpty(addressList)}">当前没有地址!</p>
				<div class="user-address" th:each="a : ${addressList}">
					<span onclick="selectAddress(this)" th:id="${a.id}" th:class="${a.isdefault == '1'?'user active':'user'}" th:text="${a.reciver}">张三</span>
					<span class="address-detail">[[${a.province}]][[${a.city}]][[${a.area}]][[${a.detailaddress}]] &nbsp;[[${a.tel}]]
						&nbsp;<button th:if="${a.isdefault == '0'}"  class="btn btn-primary btn-xs">设为默认</button>
						&nbsp;<button class="btn btn-success btn-xs">编辑</button>
						&nbsp;<button class="btn btn-danger btn-xs">删除</button>
					</span>
				</div>
				<button class="btn btn-primary btn-sm" onclick="openAddAddress()">添加新地址</button>
			</div>

			<!--添加地址的对话框-->
			<div class="modal fade" id="openAddressDialog"  aria-hidden="true" data-backdrop="static"    tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" onclick="closeDialog()" aria-label="Close">
								<span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="exampleModalLabel">添加地址</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="addAddressForm">
								<div class="form-group">
									<label for="province" class="col-sm-2 control-label">省</label>
									<div class="col-sm-10">
										<select class="form-control" id="province" name="province" onchange="selectCity(this)" placeholder="请选择省份">
											<option value="">请选择</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="city" class="col-sm-2 control-label">市</label>
									<div class="col-sm-10">
										<select class="form-control" id="city" name="city" onchange="selectArea(this)" placeholder="请选择市">
											<option value="">请选择</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="area" class="col-sm-2 control-label">区</label>
									<div class="col-sm-10">
										<select class="form-control" id="area" name="area"  placeholder="请选择区">
											<option value="">请选择</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="detailaddress" class="col-sm-2 control-label">详细地址</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="detailaddress" id="detailaddress" placeholder="请输入详细地址">
									</div>
								</div>
								<div class="form-group">
									<label for="emailcode" class="col-sm-2 control-label">邮编</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="emailcode" id="emailcode" placeholder="请输入邮编">
									</div>
								</div>
								<div class="form-group">
									<label for="reciver" class="col-sm-2 control-label">收件人</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="reciver" id="reciver" placeholder="请输入收件人姓名">
									</div>
								</div>
								<div class="form-group">
									<label for="tel" class="col-sm-2 control-label">手机</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="tel" id="tel" placeholder="请输入收件人手机号">
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" onclick="closeDialog()" >关闭</button>
							<button type="button" class="btn btn-primary" onclick="addAddress()">保存</button>
						</div>
					</div>
				</div>
			</div>

			<script th:inline="javascript">
				//保存地址
				function addAddress(){
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "adderss/addAddress";
					let params = $("#addAddressForm").serialize();  //获取表单中所有的 表单域的键值对
					console.log(params)
					$.post(url,params,function (res) {
						if (res == '1') {
							location.reload();
						}else {
							alert("保存失败!");
						}
					});
				}

				//查询省份
				$(function (){
					//jquery的就绪函数中
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "adderss/getAllProvince";
					$.get(url,function (res){
						console.log(res);
						//把省份 放到 省份的下拉框中
						let proSel = $("#province");
						for (let p of res) {
							let op =  "<option value='"+p.code+"'>"+p.name+"</option>" ;
							proSel.append(op);
						}
					},"json")
				})

				function selectCity(obj){
					let provinceCode = obj.value ;
					alert(provinceCode);
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "adderss/getCityByProvince?code="+provinceCode;
					$.get(url,function (res){
						console.log(res);
						//把省份 放到 省份的下拉框中
						let citySel = $("#city");
						//清掉里面的数据
						citySel.get(0).options.length = 1;
						let areaSel = $("#area");
						areaSel.get(0).options.length = 1 ;

						for (let c of res) {
							let op =  "<option value='"+c.code+"'>"+c.name+"</option>" ;
							citySel.append(op);
						}
					},"json")
				}

				function selectArea(obj){
					let cityCode = obj.value ;
					let baseUrl = /*[[@{/}]]*/ ;
					let url = baseUrl + "adderss/getAreaByCity?code="+cityCode;
					$.get(url,function (res){
						console.log(res);
						//把省份 放到 省份的下拉框中
						let areaSel = $("#area");
						//清空区
						areaSel.get(0).options.length = 1;
						for (let a of res) {
							let op =  "<option value='"+a.code+"'>"+a.name+"</option>" ;
							areaSel.append(op);
						}
					},"json")
				}

				function openAddAddress(){
					$("#openAddressDialog").modal("show");
				}

				function closeDialog(){
					$("#openAddressDialog").modal("hide");
				}
			</script>


			<table class="table mt10">
				<tr>
					<td>
						<div class="checkbox">
							书籍封面
						</div>
					</td>
					<td>
						<div class="checkbox">
							书籍名称
						</div>
					</td>
					<td>
						<div class="checkbox">
							单价
						</div>
					</td>
					<td>
						<div class="checkbox">
							数量
						</div>
					</td>
					<td>
						<div class="checkbox">
							小计
						</div>
					</td>
				</tr>
				<tr th:each="c : ${cals}">
					<td>
						<img th:src="|http://localhost:10001/${c.imgsrc}|" />
						<input type="hidden" name="bookId" th:value="${c.bookid}" />
					</td>
					<td th:text="${c.bookname}">
						JAVA核心技术卷I
					</td>
					<td>
						<span class="book-price" th:text="${c.price}">
							138.00
						</span>
					</td>
					<td>
						<span class="book-num" th:text="${c.bcount}">
							1
						</span>
					</td>
					<td>
						<span class="book-total" th:text="${c.sumprice}">
							138
						</span>
					</td>
				</tr>
				<tr id="last-tr">
					<td colspan="7" class="no-padding">
						
						<a href="javascript:void(0)" onclick="submitOrder()" class="buy btn btn-danger fr ml10">
							提交订单
						</a>
						<span class="fr ">合计 : <i class="total" th:text="${allPrice}">0</i> 元</span>
					</td>
				</tr>

			</table>

		</div>


		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{commons/tag::footer}"></div>
	</body>
	
	<script th:inline="javascript">
		   /*$(".address .user").click(function(){
		        // $(this).siblings().removeClass("active");
				$(".user").removeClass("active");
		        $(this).addClass("active");
		    })*/

		   function selectAddress(obj){
			   $(".user").removeClass("active");
			   $(obj).addClass("active");
		   }

		   function submitOrder(){
			   //地址的 id
				let span = $(".active");
				let aid = span.attr("id");
				//alert(aid);
				// 获取 商品的id
				let bookIds = '';
				let inputs = $("input[name=bookId]");
				inputs.each(function (){
					bookIds += "&bookId="+$(this).val();
				})
			   let params = "addressId="+aid + bookIds ;
				let baseUrl = /*[[@{/}]]*/ ;
				let url = baseUrl + "order/submitOrder";
			    $.post(url,params,function (res){
					if (res.code == '200') {
						alert(res.msg);
						//去付款页面
						//location.reload();
						location.href = baseUrl+"order/toPay?orderId="+res.orderId;
					}else {
						alert(res.msg);
					}
				})
		   }
	</script>
	
	
</html>
